/*
 * @Author: mayijun
 * @Date: 2022-05-14 11:12:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-06-21 10:14:56
 */
//指标组件
import { defineComponent, onMounted, PropType, reactive } from 'vue';
import './index.scss';
import { RemoveFilled } from '@element-plus/icons-vue';
import IndexTagDropdwon from './indexTagDropdwon';
import IndexGroupDrawer from './indexGroupDrawer';

const IndexTag = defineComponent({
  name: 'IndexTag',
  components: { RemoveFilled },
  props: {
    itemData: {
      type: Object,
      default: null
    },
    showGroup: {
      type: Boolean as PropType<boolean>,
      default: true
    },
    chosenDimensionIds: {
      type: Array,
      default: () => []
    },
    chosenMetricsIds: {
      type: Array,
      default: () => []
    },
    isMetricsFavorite: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: -1
    },
  },
  emits: ['removeItem', 'selectChange', 'indexSubmit'],
  setup: (props, { slots, attrs, emit }) => {
    let state = reactive({
      groupDrawer: false,
      arithmeticList: [] as any,
      indexItem: {},
      edit: false
    });
    const goEdit = () => {
      if (props.itemData?.arithmeticList?.length) {
        state.groupDrawer = true;
      }
    }
    const submit = (model: any) => {
      emit('indexSubmit', model);
      state.groupDrawer = false;
    }
    const handleRemove = (data: any, index: number) => {
      emit('removeItem', data.id, index);
    }
    const selectChange = (val: any) => {
      if (val !== '-999') {
        emit('selectChange', val);
      }
    }

    return () => {
      return (
        <>
          <div class={[
            'index-tag-wrap',
            props.itemData?.arithmeticList?.length ? 'group-index' : ''
          ]}
            onClick={goEdit}
          >
            <div class="index-tag-disname" title={props.itemData.combinationName || props.itemData.cnName}>
              <el-tooltip content={props.itemData.combinationName || props.itemData.cnName} placement="top">
                <span>{props.itemData.combinationName || props.itemData.cnName}</span>
              </el-tooltip>
            </div>
            {!props.itemData?.arithmeticList?.length && (
              <IndexTagDropdwon
                itemData={props.itemData}
                showGroup={props.showGroup}
                onSelectChange={selectChange}
                onGroupDrawerBol={(bol: any) => (state.groupDrawer = bol)}
              />
            )}

            <span class="icon-wrap" onClick={() => handleRemove(props.itemData, props.index)} >
              <el-icon>
                <remove-filled />
              </el-icon>
            </span>
          </div>
          <IndexGroupDrawer
            editData={props.itemData}
            onSubmit={submit}
            v-model:drawerVisible={state.groupDrawer}
            chosenDimensionIds={props.chosenDimensionIds}
            chosenMetricsIds={props.chosenMetricsIds}
            isMetricsFavorite={props.isMetricsFavorite}
          />
        </>
      );
    };
  }
});

export default IndexTag;
